{include file="public/header"/}
<link rel="stylesheet" href="/static/index/css/order.css">
<style>
    .recharge1 {
        background: #edf3fb;
        height: calc(100vh - 44px) !important
    }

    .recharge1 .record-tabbar {
        height: 60px;
        background: #367be2;
        line-height: 60px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        padding: 0 24px;
        overflow-x: auto
    }

    .recharge1 .record-tabbar .list {
        height: 28px;
        line-height: 28px;
        border-radius: 15px;
        padding: 2px 6px;
        font-family: Rubik-Regular;
        text-align: center;
        font-weight: 700;
        color: #edf3fb;
        opacity: .5;
        white-space: nowrap
    }

    .recharge1 .record-tabbar > .list ~ .list {
        margin-left: 10px
    }

    .recharge1 .record-tabbar .action {
        background: #edf3fb;
        border-radius: 15px;
        font-size: 14px;
        font-family: Rubik-Regular;
        font-weight: 700;
        color: #367be2;
        opacity: 1
    }

    .recharge1 .details-empty {
        text-align: center
    }

    .recharge1 .details-empty .empty-text {
        margin-top: 20px;
        font-size: 15px;
        font-family: Rubik-Regular;
        font-weight: 400;
        color: #000
    }

    .recharge1 .details-empty .jump-btn {
        width: 140px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        margin: 48px auto;
        background: -webkit-linear-gradient(282deg, #6197ff, #01cdff);
        background: linear-gradient(168deg, #6197ff, #01cdff);
        border-radius: 22px;
        font-size: 14px;
        font-family: Rubik-Regular;
        font-weight: 700;
        color: #fafafa
    }

    .recharge1 .recordslist {
        border-radius: 12px;
        padding: 20px
    }

    .recharge1 .recordslist .item {
        padding: 0 16px 40px;
        background: #fefffe;
        border-radius: 12px;
        position: relative
    }

    .recharge1 .recordslist .item .StatusAndTime {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .recharge1 .recordslist .item .StatusAndTime .time {
        padding: 14px 0;
        font-size: 12px;
        font-weight: 400;
        color: #000;
        opacity: .4
    }

    .recharge1 .recordslist .item .StatusAndTime .status {
        font-weight: 600;
        color: #fe8a29
    }

    .recharge1 .recordslist .item .flex-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .recharge1 .recordslist .item .flex-row uni-image {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        margin-right: 12px
    }

    .recharge1 .recordslist .item .flex-row .orderno {
        font-size: 15px;
        font-family: Rubik-Regular;
        font-weight: 700
    }

    .recharge1 .recordslist .item .flex-row .money uni-text {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #a0a0a0;
        margin-right: 10px;
        display: inline-block;
        white-space: nowrap
    }

    .recharge1 .recordslist .item .flex-row .btn_box {
        position: absolute;
        right: 10px;
        bottom: 10px
    }

    .recharge1 .recordslist .item .flex-row .btn {
        background: #ff2442;
        border-radius: 12px;
        font-size: 14px;
        font-family: BebasNeue;
        color: #fff;
        padding: 4px 12px;
        text-align: center;
        -webkit-align-self: flex-end;
        align-self: flex-end
    }

    .recharge1 .recordslist .item .flex-row .settlement {
        text-align: center
    }

    .recharge1 .recordslist .item .flex-row .settlement uni-view {
        text-align: center
    }

    .recharge1 .recordslist .newTimeStyle .unPaid {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .recharge1 .recordslist .newTimeStyle .unPaid > uni-view:first-child {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        font-family: HFVoyager;
        font-weight: 600;
        color: #989998;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    .recharge1 .recordslist .newTimeStyle .unPaid .forzeTime {
        background: #323332;
        border-radius: 3px;
        font-weight: 700;
        color: #fefffe;
        padding: 5px;
        font-family: HFVoyager;
        margin-left: 5px;
        letter-spacing: 1px;
        width: 75px;
        text-align: center
    }

    .recharge1 .recordslist .newTimeStyle .unPaid > uni-view:last-child {
        background: #ff2442;
        border-radius: 12px;
        font-size: 14px;
        font-family: HFVoyager;
        font-weight: 500;
        color: #fff;
        padding: 4px 12px
    }

    .recharge1 .recordslist > .item ~ .item {
        margin-top: 10px
    }

    .recharge1 .mescroll-wrap {
        height: calc(100vh - 44px);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow-y: auto;
        background: #edf3fb
    }
</style>


<body>
<uni-app class="uni-app--maxwidth">
    <uni-page data-page="pages/order/index">
        <uni-page-wrapper>
            <uni-page-body>
                <div class="recharge1">
                    <div class="top-page"
                         style="height: 44px; background: linear-gradient(to right, rgb(54, 123, 226), rgb(54, 123, 226)); color: rgb(255, 255, 255);">
                        <div class="apex"
                             style="height: 44px; line-height: 44px; background: linear-gradient(to right, rgb(54, 123, 226), rgb(54, 123, 226)); color: rgb(255, 255, 255); position: fixed;">
                            <a href="javascript:window.history.go(-1)" class="left">
                                <uni-text class="iconfont icon-fanhui1"
                                          style="font-size: 16px; color: rgb(255, 255, 255);"><span></span></uni-text>
                            </a>
                            <div class="center" style="font-size: 17px;">记录</div>
                            <div class="right"></div>
                        </div>
                        <div class="placeholder" style="height: 44px; line-height: 44px;"></div>
                    </div>
                    <div class="record-tabbar">

                        <a href="{:Url('order/index')}?type=0">
                            <div class="list">
                                <uni-text><span>待办的</span></uni-text>
                                <div class="line"></div>
                            </div>
                        </a>

                        <a href="{:Url('order/index')}?type=1">
                            <div class="list">
                                <uni-text><span>完全的</span></uni-text>
                            </div>
                        </a>

                        <a href="{:Url('order/index')}?type=2">
                            <div class="list">
                                <uni-text><span>沉降</span></uni-text>
                            </div>
                        </a>

                        <a href="{:Url('order/index')}?type=3">
                            <div class="list">
                                <uni-text><span>冷冻</span></uni-text>
                            </div>
                        </a>
                    </div>

                    {notempty name="list"}
                    <uni-scroll-view class="mescroll-wrap">
                        <div class="uni-scroll-view">
                            <div class="uni-scroll-view" style="overflow: hidden auto;">
                                <div class="uni-scroll-view-content">
                                    <div class="uni-scroll-view-refresher"
                                         style="background-color: rgb(255, 255, 255); height: 0px;">
                                        <div class="uni-scroll-view-refresh">
                                            <div class="uni-scroll-view-refresh-inner"></div>
                                        </div>
                                    </div>

                                    <uni-view class="recordslist">

                                        {volist name="list" id="vo"}
                                        <a class="Continue" data-id="{$vo.id}" >
                                        <uni-view class="item">
                                            <uni-view class="StatusAndTime">
                                                <uni-view class="time">{$vo.create_time|toDate}</uni-view>
                                            </uni-view>
                                            <uni-view class="flex-row">
                                                <uni-view class="pic">
                                                    <uni-image>
                                                        <div style="background-image: url({$vo.goods_pic}); background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;"></div>
                                                        <img src="{$vo.goods_pic}">
                                                    </uni-image>
                                                </uni-view>
                                                <uni-view class="info flex-column">
                                                    <uni-view class="orderno">{$vo.order_id}
                                                    </uni-view>
                                                    <uni-view class="money">
                                                        <uni-text><span>价钱:</span></uni-text>
                                                        ${$vo.goods_price}
                                                    </uni-view>
                                                    <uni-view class="money">
                                                        <uni-text><span>佣金:</span></uni-text>
                                                        {$vo.order_commission * 100}%
                                                    </uni-view>
                                                    <uni-view class="money">
                                                        <uni-text><span>收益:</span></uni-text>
                                                        {$vo.order_earnings}
                                                    </uni-view>
                                                </uni-view>
                                                <uni-view class="btn_box" style="align-self: flex-end;">
                                                    {switch vo.status}
                                                    {case 0}
                                                    <uni-view data-id="{$vo.id}" class="btn Continue">继续</uni-view>
                                                    {/case}
                                                    {case 1}
                                                    <uni-view data-id="{$vo.id}" class="btn Continue">结束</uni-view>
                                                    {/case}
                                                    {case 2}
                                                    <uni-view data-id="{$vo.id}" class="btn Continue">待解决</uni-view>
                                                    {/case}
                                                    {case 3}
                                                    <uni-view data-id="{$vo.id}" class="btn Continue">商户加工 </uni-view>
                                                    {/case}
                                                    {/switch}

                                                </uni-view>
                                            </uni-view>
                                            <uni-view class="newTimeStyle"></uni-view>
                                        </uni-view>
                                        </a>
                                        {/volist}

                                    </uni-view>
                                </div>
                            </div>
                        </div>
                    </uni-scroll-view>
                    {else /}
                    <!--空 -->
                    <div class="details-empty">
                        <uni-image class="empty-img">
                            <div style="background-image: url(/static/index/img/01.png); background-position: center center; background-size: contain; background-repeat: no-repeat;">
                            </div>
                            <img src="/static/index/img/01.png" draggable="true">

                        </uni-image>
                        <div class="empty-text">没有记忆</div>
                        <a href="{:Url('grab/index')}" class="jump-btn">立即抢购</a>
                    </div>
                    <div class="bg"></div>
                    {/notempty}

                    {include file="public/footer"/}
                </div>
            </uni-page-body>
        </uni-page-wrapper>
    </uni-page>
</uni-app>

<script>
    $(document).on("click", ".Continue", function () {
        var id = $(this).data('id');
        window.location.href = "detail/" + id ;
    });
</script>

<script>
    ;(function () {
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg); //匹配目标函数
            if (r != null) return unescape(r[2]);
            return null; // 返回参数值
        }

        let $list = $(".record-tabbar .list");
        let type = getUrlParam("type") || 0;
        $list.eq(type).addClass("action").siblings().removeClass("action");
        $list.on("click", function () {
            $(this).addClass("action").siblings().removeClass("action");
        });
    }())
</script>

</body>
</html>